<template>
    <v3-form class="v3Query" :key="`${new Date().getTime()}`" :schema="schema" ref="queryForm" :notRule="schema.notRule ?? true" :model="queryData" @submit="handleQuery" @event="formEvent" :itemSlotIdx="querySlotIdx" :isAlone="false">
        <template #formItem="slotProps">
            <slot name="queryItem" :item="slotProps"></slot>
        </template>
    </v3-form>
</template>
<script setup name="v3Query">
/* 页面的查询组件，基于v3Form组件。 */
import v3Form from './v3Form.vue'
import { ref, onMounted, reactive } from 'vue'
import { deepClone } from '@/utils/tools.js'
const emit = defineEmits(['up']);
const queryForm = ref(null)
const initQueryConfig = ref({})
const props = defineProps({
    schema: {
        type: Object,
        default: () => {}
    },
    /* 单独使用时 */
    queryModel: {
        type: Array,
        default: () => []
    },
    querySlotIdx: {
        type: [Number, Array],
        default: 0
    }
})
let schema = {
    "inline": true,
    ...props.schema
}
const privateFn = {
    getData() {
        const data = queryForm.value.getFormData()
        return {
            ...data,
            _matchType_: schema.matchType
        }
    },
    reset() {
        return queryForm.value.reset()
    },
    /* table翻页等无配置request项方法，提供查询数据方法 */
    search(config, params = {}) {
        queryForm.value.setBtnStatus(config)
        // 若果是table的翻页功能，先获取查询相关的配置
        if (config.actBy === "table") {
            config = initQueryConfig.value
            params = privateFn.getData()
        }
        init(config, params)
    }
}
// 
const queryData = reactive(schema.urlQueryData || {})
const handleQuery = (config, params = {}) => {
    queryForm.value.setBtnStatus(config)
    if (config.actOn === "table" && config.rangeFn === "update") params.pageNum = 1
    config.notImmediate = false
    init(config, params)
}
const init = (auxConfig, auxParams) => {
    const { operations = [], items: formItems = [] } = schema
    // console.log('v3Query-schema--', schema, props.queryModel)
    /* 合并地址栏查询数据和表单携带数据 */
    const queryModelkey = Object.keys(props.queryModel)
    queryModelkey.length && queryModelkey.forEach(key => {
        if(!queryData[key]) queryData[key] = props.queryModel[key]
    })
    // Object.assign(queryData, urlQueryData);
    initQueryConfig.value = operations.find(item => item.actOn === "table" && item.rangeFn === "update")
    // 默认查询table
    const config = auxConfig || initQueryConfig.value
    if (!config) return
    if (config.notImmediate) { // 是否立即执行,默认立即执行
        queryForm.value.setBtnStatus(config)
        return 
    }
    /* 初始化页面---查询前，先获取查询数据 */
    const params = (!auxConfig && !auxParams) ? privateFn.getData() : {}
    /* 有额外参数时，先修改参数，再执行查询。初始化时的查询状态在配置项中配置 */
    if (auxParams) {
        Object.assign(params, auxParams)
    }
    // query 组件对外提供的 search 方法中调用了 init 方法，避开死循环。
    if (config.actOn !== 'query' && config.rangeFn !== 'search') {
        emit('up', {index: schema.index, ...config}, { ...queryData, ...params, _matchType_: schema.matchType}, cb => {
            /* 查询成功后，设置按钮状态为可用 */
            queryForm.value.setBtnStatus(config)
        })
    }
}
onMounted(() => {
    // init()
})
const formEvent = (event, data) => {
    // console.log('v3Query-formEvent--', event, data)
    emit('event', event, data)
}
// console.log('v3Query-schema--', schema)
defineExpose(privateFn)

</script>
<style>

</style>
